<template>
  <el-dialog :title="props.operType === 'add' ? '新增广告' : '编辑广告'" v-model="visible" width="50%" append-to-body>
    <el-form :model="form" :rules="rules" ref="advertRef" label-width="100px">
      <el-row :gutter="24">
        <el-col :span="16">
          <el-form-item label="广告名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入名称" maxlength="60" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="广告类型" prop="resourceType">
            <el-select v-model="form.resourceType" :disabled="props.operType === 'edit'" @change="handleResourceType(form.resourceType)" placeholder="请选择类型" style="width:100%">
              <el-option
                v-for="item in adTypeOptions"  
                :key="item"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8"></el-col>
      </el-row>
      <el-row v-if="form.resourceType == 1">
        <el-col :span="24">
          <el-form-item label="广告图片" prop="info">
            <ImageUploadByType v-model="form.info" uploadType="1" :limit="1" :fileSize="30" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="form.resourceType == 2">
        <el-col :span="24">
          <el-form-item label="广告视频" prop="info">
            <VideoUpload v-model="form.info" uploadType="2" :limit="1" :fileSize="30"/>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row v-if="form.resourceType == 2 && form.info.length>0">
        <el-col :span="16">
          <el-form-item label="视频时长" prop="duration">
            <el-input-number v-model="form.duration" placeholder="请输入" :min="1" style="width:90%" />
            <span style="margin-left:10px;"> 秒 </span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
        </el-col>
      </el-row> -->
      <el-row>
        <el-col :span="16">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入" maxlength="250" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm" :loading="loadingSubmit">{{props.operType === 'add'?'新增':'更新'}}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessageBox} from 'element-plus'
import { defineProps } from 'vue';
import { addAdvert, getAdvertDetail, updateAdvert } from '@/api/advert';

const props = defineProps({  
  operType: {  
    type: String,
    default: 'add' 
  },
  adTypeOptions: {
    type:Array,
    default: () => []
  } 
})
const emit = defineEmits(["updateList"]);
const { proxy } = getCurrentInstance()
const visible = ref(false);
const loadingSubmit = ref(false);
const advertRef = ref()

const form = ref({
  name:null,
  adId: null,
  resourceType:null,
  resourceId:null,
  duration:null,
  remark:null
});
const rules = {
  name:[{ required: true, message: "广告名称不能为空", trigger: ["blur", "change"] }],
  resourceType: [{ required: true, message: "请选择广告类型", trigger: ["blur", "change"] }],
  info:[{ required: true, message: "请上传广告内容", trigger: ["blur", "change"] }]
}

function submitForm() {
  proxy.$refs["advertRef"].validate(valid => {
    if (valid) {
      loadingSubmit.value = true;
      let params = { 
        ...form.value, 
        duration:form.value.info[0].duration,
        resourceId: form.value.info[0].resourceId
      };
      delete params.info;
      if(props.operType === 'add'){
        addAdvert(params).then((res)=>{
          proxy.$modal.msgSuccess('新增成功')
          emit('updateList')
          visible.value = false;
        },(error)=>{
          loadingSubmit.value = false;
        })
      } else {
        ElMessageBox.confirm('确认要修改这行数据吗?','系统提示',{
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
          center: false,
        }).then(() => {
          updateAdvert({ ...params, adId: currentId.value }).then((res)=>{
            proxy.$modal.msgSuccess('更新成功')
            emit('updateList')
            visible.value = false;
          })
        }).catch(() => {
          loadingSubmit.value = false;
        })
      }
    }
  });
}
const currentId = ref();
function show(type,id) {
  reset()
  visible.value = true;
  if(type === 'edit') {
    getDetailData(id);
    currentId.value = id;
  }
}

function getDetailData(id) {
  getAdvertDetail(id).then(res => {
    form.value = res?.data;
    form.value.resourceType = res.data.type;
    let obj = {
      resourceType: res.data.type,
      resourceId:res.data.resourceId,
      name:res.data.name,
      url:res.data.resourceUrl,
      duration:res.data.duration
    };
    form.value.info = [obj]

  })
}

function handleResourceType(resourceType){
  if(form.resourceType !== resourceType){
    form.value.info = null;
  }
}

function reset() {
  form.value = {
    name:null,
    adId: null,
    resourceType:null,
    resourceId:null,
    duration:0,
    remark:null
  }
  if (advertRef.value) {
    advertRef.value.resetFields();
  }
  loadingSubmit.value = false;
}
defineExpose({
  show
});
</script>

<style lang="scss" scoped>
.box-card{
  margin-bottom: 10px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item-input{
  margin-bottom: 5px;
}
:deep(.el-input-group__prepend) {
  background-color: #f5f7fa00 !important;
}
:deep(.el-card__body) {
  padding: 15px 20px 10px 20px !important;
}
</style>